<template>
    <div class="addressChoose">
        <div class="secOne">
            <div class="nowCity">
                当前城市:&nbsp;&nbsp;
                <image src="../../../web/img/local.png" style="width:22px;height:28px;margin-top:5px;"></image>
                &nbsp;&nbsp;{{currentCity}}
            </div>
            <text class="locationAgain">重新定位</text>
        </div>
        <div class="secTwo">
            <text class="hotCity">热门城市</text>
            <div class="someCity">
                <text v-for="i in hotCitys" class="city" @click="dian1($event)">{{i}}</text>
            </div>
        </div>
        <div class="secThree">
            <a v-for="i in otherCity" class="cities" @click="dian1($event)">{{i}}</a>
        </div>
        <div class="fixedBox">
            <a :href="'#'+i" class="zimu" v-for="i in words">{{i}}</a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "address-choose",
        data(){
            return{
                currentCity:"西安市",
                hotCitys:["西安市","安康市","咸阳市","铜chuan","上海市","等等"],
                words:["A","B","C","D","E","F","G","H",'I','J','K','L',"M",'N',"O","P",'Q',"R","S","T","U","V","W","X","Y","Z"],
                otherCity:["A","安康","鞍山","安庆","安阳","1233","B","安康","鞍山","安庆","安阳","1233","C","安康","鞍山","安庆","安阳","1233","D","安康","鞍山","安庆","安阳","1233","安康","鞍山","安庆","安阳","1233","安康","鞍山","安庆","安阳","1233","E","安康","鞍山","安庆","安阳","1233","安康","鞍山","安庆","安阳","1233","安康","鞍山","安庆","安阳","1233"]
            }
        },
        mounted:function(){
            let citys = document.getElementsByClassName("cities");
            for(let i in citys){
                if(citys[i].innerHTML==="A"||citys[i].innerHTML==="B"||citys[i].innerHTML==="C"||citys[i].innerHTML==="D"||citys[i].innerHTML==="E"||citys[i].innerHTML==="F"||citys[i].innerHTML==="G"||citys[i].innerHTML==="H"||citys[i].innerHTML==="I"||citys[i].innerHTML==="J"||citys[i].innerHTML==="K"||citys[i].innerHTML==="L"||citys[i].innerHTML==="M"||citys[i].innerHTML==="N"||citys[i].innerHTML==="O"||citys[i].innerHTML==="P"||citys[i].innerHTML==="Q"||citys[i].innerHTML==="R"||citys[i].innerHTML==="S"||citys[i].innerHTML==="T"||citys[i].innerHTML==="U"||citys[i].innerHTML==="V"||citys[i].innerHTML==="W"||citys[i].innerHTML==="X"||citys[i].innerHTML==="Y"||citys[i].innerHTML==="Z"){
                    citys[i].style.borderBottom="1px solid #ccc";
                    citys[i].ID="#"+citys[i];
                    citys[i].setAttribute("name",citys[i].innerHTML);
                }
            }
        },
        methods:{
            dian1(e){
                if(e.target.innerHTML==="A"||e.target.innerHTML==="B"||e.target.innerHTML==="C"||e.target.innerHTML==="D"||e.target.innerHTML==="E"||e.target.innerHTML==="F"||e.target.innerHTML==="G"||e.target.innerHTML==="H"||e.target.innerHTML==="I"||e.target.innerHTML==="J"||e.target.innerHTML==="K"||e.target.innerHTML==="L"||e.target.innerHTML==="M"||e.target.innerHTML==="N"||e.target.innerHTML==="O"||e.target.innerHTML==="P"||e.target.innerHTML==="Q"||e.target.innerHTML==="R"||e.target.innerHTML==="S"||e.target.innerHTML==="T"||e.target.innerHTML==="U"||e.target.innerHTML==="V"||e.target.innerHTML==="W"||e.target.innerHTML==="X"||e.target.innerHTML==="Y"||e.target.innerHTML==="Z"){
                    this.currentCity="";
                }else{
                    this.currentCity=e.target.innerHTML;
                }
            }
        }
    }
</script>

<style scoped>
    .secThree{
        flex-direction: column;
    }
    .cities{
        font-size: 28px;
        font-weight: 300;
        line-height: 68px;
    }
    .zimu{
        font-size: 20px;
        color:#40b404;
        text-align: center;
        margin:2.5px 0;
    }
    .fixedBox{
        position: fixed;
        right:7px;
        top:475px;
    }
    .city{
        line-height: 46px;
        padding:0 20px;
        border:1px solid #bbb;
        border-radius: 20px;
        margin:20px 20px;
        font-size: 28px;
        font-weight: 300;
    }
    .someCity{
        margin-top:20px;
        flex-direction: row;
        flex-flow: wrap;
        justify-content: space-around;
    }
    .hotCity{
        font-size: 30px;
        font-weight: 600;
    }
    .secTwo{
        margin-top:52px;
    }
.secOne{
    flex-direction: row;
    margin-top:40px;
    justify-content: space-between;
}
    .nowCity{
        flex-direction: row;
        font-size: 30px;
        color:#444;
    }
    .locationAgain{
        font-size:30px;
        color:#40b474;
    }
    .addressChoose{
        padding:0 28px;
        flex:1;
        overflow-y: scroll;
    }
</style>